<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
<link rel="stylesheet" href="css/biaogege.css" type="text/css">
<link rel="stylesheet" href="css/iconfont.css" type="text/css">
</head>
<body>
<table border="1">
    <!-- 表格头 -->
	<thead >
	    <tr class="header">
	    	<th colspan="5">采购清单</th>
	    </tr>
	    <tr>
			<th>序号</th>
			<th>商品名称</th>
			<th>单价</th>
			<th>数量</th>
			<th>操作</th>
	    </tr>
	</thead>
	<!-- 表格内容 -->
	<tbody>
		<tr>
			<td>1</td>
			<td>毛笔</td>
			<td>2.5</td>
			<td>5</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>
		<tr>
			<td>2</td>
			<td>钢笔</td>
			<td>10</td>
			<td>3</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>
		<tr>
			<td>3</td>
			<td>文具盒</td>
			<td>5</td>
			<td>7</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>

		<tr>
			<td>4</td>
			<td>橡皮擦</td>
			<td>1.5</td>
			<td>9</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>
		
		<tr>
			<td>5</td>
			<td>红笔</td>
			<td>5.5</td>
			<td>4</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>
		<tr>
			<td>6</td>
			<td>铅笔</td>
			<td>15</td>
			<td>10</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>
		<tr>
			<td>7</td>
			<td>墨水</td>
			<td>12</td>
			<td>6</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>
		<tr>
			<td colspan="5">
				<p style="text-align:rigth;">总计:<span id="sum" style="color:red"></span></p>
			</td>
		</tr>
	</tbody>
   <!-- 弹窗 -->
	<div class="shade" style="display:none;">
		<div class="form-wrap">
	    	<h5 class="form-header">添加商品</h5>
	        <div class="addform">
				<input type="text" value="" placeholder="请输入商品名称" name="goods"><br>
				<input type="text" value="" placeholder="请输入商品单价" name="price"><br>
				<input type="text" value="" placeholder="请输入商品数量" name="num"><br>
				<div class="addoption">
					<button id="addBtn">确定</button>
					<button id="missBtn">取消</button>
				</div>
				<div class="cha">
	  				<span class="iconfont icon-close"></span>
	    		</div>
	        </div>
		</div>
	</div>

<script type="text/javascript" src="js/jquery3.js"></script>
<script>

/**定义一个统计函数**/
var calcSum = function(){
	var sum =0;

	/**给查找出来的每个应用相同的方法**/
	$('tbody tr').each(function(){
		var price = $(this).find('td:eq(2)').text();

		var num = $(this).find('td:eq(3)').text();

		var total = price*num;

		sum +=total;

	})
	// for(var i=0;i<$('tbody tr').length-1;i++){
	// 	var price = $('tbody tr:eq('+i+')').find('td:eq(2)').text();
	// 	var num = $('tbody tr:eq('+i+')').find('td:eq(3)').text();

	// 	var total = price*num;
		
	
	/**显示计算的总金额**/
	$('#sum').text(sum);
}
	calcSum();

 // 设置奇数行
	$('table tr:odd').addClass('odd');

	// 为添加按钮设置单击事件，点击按钮出现弹窗
	$('.addItem').click(function(){
		$('.shade').show();
	})

	$('.delItem').click(function(){
		/**删除行**/
		$(this).parent().parent().remove();
		/**调整一下奇偶的样式**/
		$('tbody tr').removeClass();
		$('tbody tr:odd').addClass('odd');

		/**调整每行的序号**/
	for(var i=0;i<$('tbody tr').length-1;i++){
		$('tbody tr:eq(' +i+')').find('td:first').text(i+1);
		
	}
	calcSum();
	})
	



    // 设置取消按钮单击事件，点击按钮弹窗消失
    $('#missBtn').click(function(){
    	$('.shade').hide();
    })

     var showForm=function(){
    	$('.shade').show();
    }

    var delTr = function(btn){
    	console.log(btn);
    	$(btn).parent().parent().remove();
    }
   

    // 设置确认按钮单击事件
    $('#addBtn').click(function(){
    	var goodsname=$('input[name=goods]').val();
    	var price=$('input[name=price]').val();
    	var num=$('input[name=num]').val();

    	// 清空输入框
    	$('input[name=goods]').val('');
    	$('input[name=price]').val('');
    	$('input[name=num]').val('');


    	var ntr=$('tbody tr').length;
    	var sn=$('tbody tr:eq('+(ntr-2)+')').find('td:first').text();
    	

    	// 把表单的值追加到表格的指定位置
    	var tr='<tr><td>'+(parseInt(sn*1+1))+'</td><td>'+goodsname+'</td><td>'+price+'</td><td>'+num+'</td><td><button class="delItem" onclick="delTr(this)">删除</button><button onclick="showForm()">添加</button></td></tr>';
    	   

    	// 往表格中插入一行
    	$('tbody tr:eq('+(ntr-2)+')').after(tr);

    	// 隐藏表单的输入层
    	$('.shade').hide();

    	// console.log(goodsname+'--'+price+'---'+num);
    	 calcSum();
    })
    

       $('.cha').click(function(){
   	$('.shade').hide();
   })


</script>

</table>
</body>
</html>